<template>
    <el-row><!-- 使用Element Plus系统布局页面 -->
        <el-col :span="24">
            <el-row class="header_home" justify="space-between">
                <el-image style="width: auto; height: auto;" :src="imgUrl" /><!-- 左侧显示图片 -->
                <el-input v-model="takeoutName" style="width: 30%;height: 50%;margin-right: 2%;" placeholder="搜索商品..."
                    size="large"><!-- 右侧搜索框 -->
                    <template #append>
                        <el-button :icon="Search" @click="searchTakeout" />
                    </template>
                </el-input>
            </el-row>
        </el-col>
        <!-- 如果不为空，显示找到的外卖列表 -->
        <el-col :span="24" style="padding: 1%;" v-show="!isEmpty">
            <el-text style="width: 100%;font-size: larger;">为您找到以下外卖:</el-text>
        </el-col>
        <!-- 外卖列表显示区域 -->
        <el-col :span="24" v-show="!isEmpty" align="start" style="padding: 1%;">
            <el-space wrap fill-ratio="" fill>
                <div v-for="item in takeouts" :key="item.id">
                    <el-card shadow="hover" style="width: 250px;height: 380px;border-radius: 15px;"
                        @click="goTakeout(item.id!)">
                        <!-- 外卖卡片内容 -->
                        <el-row align="middle" justify="center">
                            <el-col :span="24">
                                <el-image :src="`${item.takeout_portrait}`" style="width: 100%;height: 200px;"
                                    fit="contain" /><!-- 外卖卡头像内容 -->
                            </el-col>
                            <el-col :span="24" align="start"><!-- 外卖名称 -->
                                <el-text style="font-size: larger;" line-clamp="2">{{ item.takeout_name
                                    }}</el-text>
                            </el-col>
                            <el-col :span="24" align="start"><!-- 外卖简介 -->
                                <el-text style="color: gray;" line-clamp="2">{{ item.introduce }}</el-text>
                            </el-col>
                            <el-col :span="24" align="end"><!-- 外卖价格 -->
                                <el-text style="color: red;font-size: large;">¥ {{ item.price }}</el-text>
                            </el-col>
                            <el-col :span="24" style="margin-top: 5%;height: max-content;">
                                <el-row style="width: 100%;">
                                    <el-col :span="24" align="start"><!-- 浏览量和评分 -->
                                        <el-text>浏览量：{{ item.flow }}</el-text>
                                        <el-text style="margin-left: 10%;">评分：{{ item.mark }}</el-text>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>
            </el-space>
        </el-col>
        <el-col :span="24">
            <el-empty v-show="isEmpty" style="width: 100%;padding: 10%;" description="这里空空如也" />
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { useRoute } from 'vue-router';
import { imgUrl } from '../assets/common/Constants.ts';
import router from '../router/index.ts';
import { TakeoutModel } from '../assets/models/Takeout.ts';
import { takeoutApis } from '../assets/apis/TakeoutApis.ts';

//获取路由参数
const route = useRoute();//定义响应变量 // 初始化为true，表示默认没有外卖数据
const isEmpty = ref<boolean>()
const takeouts = ref<Array<TakeoutModel>>()
const takeoutName = ref<string>()

onMounted(() => { // 根据路由参数查询外卖数据
    if (Number(route.query.way) === 0) {
        takeoutApis.queryTakeoutByName(String(route.query.arg))
            .then((value: Array<TakeoutModel>) => {
                if (value) {
                    isEmpty.value = false;
                    takeouts.value = value;
                } else {
                    isEmpty.value = true;
                }
            })
    } else {
        takeoutApis.queryTakeoutByType(Number(route.query.arg))
            .then((value: Array<TakeoutModel>) => {
                if (value) {
                    isEmpty.value = false; // 有数据，更新isEmpty为false
                    takeouts.value = value;
                } else {
                    isEmpty.value = true;
                }
            })
    }
});

// 跳转到搜索外卖
const searchTakeout = () => {
    takeoutApis.queryTakeoutByName(String(route.query.arg))// 根据名称查询外卖，并更新数据
        .then((value: Array<TakeoutModel>) => {
            if (value) {
                isEmpty.value = false;// 有数据，更新
                takeouts.value = value;
            } else {
                isEmpty.value = true;
            }
        })
}

// 跳转到外卖详情页
const goTakeout = (id: number) => {
    router.push({    // 使用Vue Router跳转到外卖详情页，并携带外卖ID作为参数
        path: '/takeout',
        query: {
            id: id
        }
    })
}
</script>
